<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
		.imga{
			animation: dfc  .8s linear infinite;	
		}
		
		/*关键帧*/
		@keyframes dfc{
			0%{
				transform: rotate(180deg);
			}
			30%{
				transform: rotate(360deg);
			}
			100%{
				transform: rotate(720deg);
			}
		}
		.imga{
			animation: dfc1  .8s linear infinite;	
		}
		/*关键帧*/
		@keyframes dfc1{
			0%{
				transform:   translate(50px) rotate(180deg);
			}
			30%{
				transform:  translate(900px) rotate(360deg);
			}
			100%{
				transform:  translate(2000px) rotate(720deg);
			}
		}
		</style>
	</head>
	<body>
		<img src="../img/鸭.gif" alt="1" />
		<audio src="../img/dafengche.mp3" autoplay></audio>
		<button id="btn1">开始</button>
		<button id="btn2">暂停</button>
		<button id="btn3">翻转</button>
		<script>
		//点击 开转 图片切换并且加样式 .imga
		$("#btn1").click(function(){
			$("img").attr("src","../img/狗.gif").addClass("imga");
		});
		//	暂停 音乐消失+动画效果消失		
		$("#btn2").click(function(){
			$("audio").removeAttr("src");
			$("img").removeClass("imga");
		});
		//翻转  切换：imga 切换 imgb
		$("#btn3").click(function(){
		$("img").toggleClass("imgb");	
		$("audio").attr("src","../img/dafengche.mp3")
		});
		</script>
	</body>
</html>
